<template>
  <div>
    <keep-alive>
      <component :is="topComonents"/>
    </keep-alive>
    <div class="tabbar">
      <ul>
        <li v-for="(tab, index) in tabs" :key="tab.id" @click="clickTab(tab)">
            <img :src="tab.imgSrc"/>
            <p>{{tab.title}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import home from '@/components/Home'
import me from '@/components/Me'
import homeImg from './../assets/home.png'
import meImg from './../assets/me.png'

let tabs = [
  {id:1,title:"首页",imgSrc:homeImg,routerName:{name:'home'}},
  {id:2,title:"我的",imgSrc:meImg,routerName:{name:'me'}}
];

export default {
  name: 'HelloWorld',
  components: {
    home,
    me
  },
  data () {
    return {
      topComonents:"home",
      tabs: tabs
    }
  },
  methods:{
    clickTab(tab) {
      this.topComonents = tab.routerName.name;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tabbar {
    width: 100%;
    height: 55px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-image: linear-gradient(180deg,#d9d9d9, #d9d9d9 50%,transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top left;
    background-color: #fafafa;
  }
  .tabbar ul{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .tabbar ul li{
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tabbar ul li img{
    width: 20px;
    height: 20px;
  }
  .tabbar ul li p{
    margin-top: 5px;
    font-size: 12px;
  }
</style>
